<template>
    <div class="test">
		<div v-html="content" class="ql-editor" style="height:200px;">

		</div>

      	<div>
			<v-rtf ref="richText" :height="100" @change="change" @uploaderFileChange="uploaderFileChange($event)"></v-rtf>
		</div>
    </div>
</template>
<script>
import * as qiniu from "qiniu-js";

export default {
    data() {
        return {
            content: ``,
            options: {
                theme: 'snow',            
                modules: {
                    toolbar: [
                        ['bold', 'italic'],
                        [{ 'list': 'ordered' }, { 'list': 'bullet' }],
                        [{ 'script': 'sub' }, { 'script': 'super' }],
                        [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
                        [{ 'color': [] }, { 'background': [] }],
                        [{ 'align': [] }],
                        [/* 'link', */ 'image'/* , 'video' */]
                        ],
                    history: {
                        delay: 1000,
                        maxStack: 50,
                        userOnly: false
                    },
                    // imageDrop: true,
                    // imageResize: {}
                }
            }    
        }
    },
    methods: {
		change(e){
			this.content = e
		},

		//以下为上传图片
		uploaderFileChange(e){
			let id = "chat/" + this.$guidTime() + '/' + this.$guid(32) + ".jpg"
		
			this.getToken(e,id);
		},
		getToken(img,id) {
			let that = this;
			this.$reqPost(
				"/api/file/token/get",
				{},
				{
					hideLoading: true
				}
			).then(res => {
				let imgBaseUrl = res.data.returnData.domain
				// console.log(res.data.returnData);
				// console.log(qiniu);

				var config = {
					useCdnDomain: true
					// region: qiniu.region.z2
				};

				var putExtra = {
					fname: img.name,
					params: {},
					mimeType: ["image/png", "image/jpeg", "image/gif"] || null
				};

				var observable = qiniu.upload(
					img,
					id,
					res.data.returnData.token,
					putExtra,
					config
				);
				var subscription = observable.subscribe({
					next(res) {
						// console.log("next");
						// console.log(res);
					},
					error(err) {
						// console.log("error");
						// console.log(res);
					},
					complete(res) {
						that.$refs.richText.addImg(imgBaseUrl + res.key)
					}
				}); // 上传开始
			});
		},
    }
}
</script>
<style lang="scss" scoped>
.test{
    background: #fff;
    
}
</style>
